<template>
    <div class="draft_wrap">
        <div class="draft_title">草稿箱（{{ $store.state.draft.draft.length }}）</div>
        <div class="draft_item" v-for="(item, index) in $store.state.draft.draft" :key="index">
            <div class="left">
                <div class="title">{{ item.form.title }}</div>
                <div class="date">{{ item.date }}</div>
            </div>
            <div class="opt">
                <i class="el-icon-edit" @click="editDraft(index)"></i>
                <i class="el-icon-delete" @click="removeDraft(index)"></i>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        // 删除草稿
        removeDraft(index) {
            this.$store.commit("draft/removeDraft", index);
        },
        // 编辑草稿
        editDraft(index) {
            this.$emit(
                "draftChange",
                JSON.parse(JSON.stringify(this.$store.state.draft.draft[index]))
            );
        },
    },
};
</script>

<style lang="less" scoped>
.draft_wrap {
    padding: 10px;
    border: 1px solid #ccc;
    .draft_title {
        margin-bottom: 10px;
    }
    .draft_item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 0;
        border-bottom: 1px solid #ccc;
        .left {
            font-size: 14px;
            .title {
                cursor: pointer;
                &:hover {
                    text-decoration: underline;
                    color: orange;
                }
            }
        }
        .opt {
            i {
                cursor: pointer;
                padding: 0 3px;
            }
        }
    }
}
</style>
